<template>
	<view>	
		<!-- <u-navbar title="考试结果"></u-navbar> -->
		<view class="wrap u-m-t-30" style="background-color: #FFFFFF;">
			<view class="u-progress" style="text-align: center;">
				<u-circle-progress type="error" :percent="89" :width="375" :border-width="40" duration="2000">
					<view class='u-progress-info'>
						<view><text style="font-size:120rpx">{{resultInfo.score}}</text>分</view>
						<view>{{resultInfo.isPass ? '': '未'}}通过</view>
					</view>
				</u-circle-progress>
			</view>
			<view class=" u-m-t-30">
				<u-row gutter="16">
					<u-col span="6">
						<view class="u-text-center">30分钟</view>
						<view class="u-text-center">答题时长</view>
					</u-col>
					<u-col span="6">
						<view class="u-text-center">30分钟</view>
						<view class="u-text-center">答题时长</view>
					</u-col>
				</u-row>
			</view>
			<u-collapse class="u-m-t-30 u-m-b-30">
				<u-collapse-item :title="`错误题目（${wrongQList.length}）`" open>
					<view v-for="(item,index) in wrongQList" :key="index" class="circle">{{item.id}}</view>
				</u-collapse-item>
				<u-collapse-item :title="`正确题目（${rightQList.length}）`" open>
					<view v-for="(item,index) in rightQList" :key="index" class="circle">{{item.id}}</view>
				</u-collapse-item>
			</u-collapse>
			<view class="u-button-wrap u-m-t-30 u-p-t-30" style="text-align: center;">
				<u-button  @click="onShowAnswer" shape="circle" class="u-m-r-15" size="medium">考试解析</u-button>
				<u-button v-if="!resultInfo.isPass" @click="onTryAgain" shape="circle" class="u-m-l-15" size="medium">再次考试</u-button>
				<u-button v-else-if="!isExercise" @click="certificate()" shape="circle" class="u-m-l-15" size="medium">查看证书</u-button>
			</view>
		</view>

		<mosowe-canvas-image
			ref="refImgComponent"
			:lists="certList"
			@canvasImage="canvasImage"
			width="750"
			height="1125"
		/>
		<view v-show="showPopCert" class="pop-cert">
			<view style="width: 600rpx;height: 70vh;position: relative; background:#fff;">
				<image src="../../static/cert/cert.jpg" style="width: 100%;height: 100%;"></image>
				<view style="position: absolute;width: 100%;padding: 30rpx;box-sizing: border-box; top:380rpx;left:60rpx;">
					<view style="font-weight: bold;">{{certInfo.userName || '测试'}}</view>
					<view style="margin-top:20rpx;">恭喜您！</view>
					<view style="margin-top:30rpx;font-weight: bold;">已完成{{resultInfo.examName}}全部培训</view>
					<view style="margin-top:20rpx;">考试合格，特发此证。</view>
				</view>
				<view style="position: absolute;bottom: 50px;text-align: right;width: 100%;padding-right: 60rpx;">
					<text>{{certInfo.certificationAuthority || '机构'}}</text><br/>
					<text>{{certInfo.gainTime}}</text>
				</view>
			</view>
			<button style="background: linear-gradient(141deg,#9fb8ad 0%, #da155d 51%,#a8038e 100%);color:#fff; width: 300rpx;margin-top:20rpx;border-radius: 100rpx;"
				@click="saveCertImage">保存图片</button>
		</view>
	</view>
</template>

<script>
	import mosoweCanvasImage from "../../components/mosowe-canvas-image/mosowe-canvas-image.vue"
	export default {
		props:{
			resultInfo: Object,
			isExercise: Boolean
		},
		components:{
			mosoweCanvasImage
		},
		data() {
			return {
				questionList: [],
				rightQList:[],
				wrongQList:[],
				certList:[],
				certInfo:{
					userName: '',
					creatTime:'',
				},
				showPopCert: false
			}
		},
		watch:{
			resultInfo:{
				handler(newValue){
					console.log('resultInfo', newValue)
					if(!newValue || !newValue.questionList) return
					this.rightQList = newValue.questionList.filter(item => item.isCorrect)
					this.wrongQList = newValue.questionList.filter(item => !item.isCorrect)
				},
				immediate: true
			},
		},
		methods:{
			onShowAnswer(){
				this.$emit("showAnswer")
			},
			onTryAgain(){
				this.$emit('tryAgain')
			},
			certificate(){
				this.$http.getQualification(this.resultInfo.qualificationId).then(res =>{
					if(!res.data) return
					res.data.gainTime = res.data.gainTime.split(' ')[0]
					this.certInfo = res.data
					this.showPopCert = true
				})
			},
			saveCertImage(){
				let userInfo = uni.getStorageSync('userData')
				console.log('userInfo', userInfo)
				// 绑定数据
				let certList = [
					{ type: 'image', content: '../../static/cert/cert.jpg',  width: '750',  height: '1125',  x: 0,  y: 0,},
					{ type: 'text',content: userInfo.nickName || '测试', x: 110, y: 530, color: '#000', size: 32, },
					{ type: 'text',content: '恭喜您！', x: 110, y: 590, color: '#000', size: 32, },
					{ type: 'text', content: `已完成${this.resultInfo.examName}全部培训`,  x: 110,  y: 650,  color: '#000',  size: 32,  align: 'left', },
					{ type: 'text', content: '考试合格，特发此证。',  x: 110,  y: 710,  color: '#000',  size: 32,  align: 'left', },
					{ type: 'text', content: this.certInfo.certificationAuthority || '机构名称',  x: 660,  y: 900,  color: '#000',  size: 32,  align: 'right', },
					{type: 'text',content: this.getDateTime(), x: 660, y: 960, color: '#000', size: 32, align: 'right', },
				]
				this.certList = certList
				this.$nextTick(() => {
					this.$refs.refImgComponent.createCanvas()
				})
			},
			getDateTime(){
				let curDate = new Date()
				let year = curDate.getFullYear()
				let month = ('0'+ (curDate.getMonth()+1)).slice(-2)
				let date = ('0' + (curDate.getDate())).slice(-2)
				return [year, month, date].join('.')
			}
		}
	}
</script>

<style>
.circle{
	display: inline-block;
	width: 60rpx;
	height: 60rpx;
	margin-right: 20rpx;
	border:1px solid #dedede;
	text-align: center;
	line-height: 60rpx;
	border-radius: 100%;
}

.pop-cert{
	display: flex;
	position: fixed;top:0;left:0; z-index: 1; width: 100%;height: 100vh;flex-direction: column;justify-content: center;align-items: center; background: rgba(0,0,0,0.5);
}
</style>
